<template>
	<view >
		<view class="goods_list">
			<view class="sadsd">
				<Address/>
			</view>
			<view class="title">
				<uni-icons type="shop" size="18"></uni-icons>
				<text>购物车</text>
			</view>
			<uni-swipe-action>
				<block class="goods" v-for="(goods, i) in cart" :key="i">
					<uni-swipe-action-item :right-options="options"  @click="swipeItemClickHandler(goods)">
						<goods :goods="goods" :showRadio="showRadio" :showNumberBox="showNumberBox"
							@radioChange="radioChangeClick" @numChange="numChangeClick" />
					</uni-swipe-action-item>
				</block>
			</uni-swipe-action>
			<Settle 
				:total='checkedCount' 
				:totalPrice="totalPrice"
				:isAll="isAll"
				@isCheckedAll="isCheckedAll"
				@settlement='settlement'
			/>
		</view>
	</view>
</template>
<script>
	import {mapGetters,mapState,mapMutations} from 'vuex'
	import Address from '@/components/address/address.vue'
	import Settle  from '@/components/settle/settle.vue'
	export default {
		computed: {
			...mapGetters('m_cart', ['checkedCount','totalPrice','total']),
			...mapGetters('m_user',['addstr']),
		    ...mapState('m_user', ['token']),
			...mapState('m_cart', ['cart']),
			
			//是否全选
			isAll(){
				return this.total==this.checkedCount
			}
		},
		components:{
			Address,
			Settle
		},
		onShow() {
			this.setBadge()
		},
		data() {
			return {
				showRadio: true,
				showNumberBox: true,
				options: [{
					text: '删除',
					style: {
						backgroundColor: '#FA5151'
					}
				}],
			};
		},
		methods: {
			...mapMutations('m_cart', ['updateGoodsState', 'updateGoodsNum','removeGoodsById','updateAllGoodsState']),
			radioChangeClick(e) {
				this.updateGoodsState(e)
			},
			setBadge() {
				uni.setTabBarBadge({
					index: 2,
					text: this.total + ''
				})
			},
			numChangeClick(e) {
				this.updateGoodsNum(e);
				this.setBadge()
			},
			swipeItemClickHandler(goods){
				this.removeGoodsById(goods)
			},
			isCheckedAll(){
				this.updateAllGoodsState(this.isAll)
			},
			settlement(){
				console.log(!this.token)
				console.log(this.addstr)
				   if (!this.token) return uni.$showMsg('请先登录！')
				  if (!this.checkedCount) return uni.$showMsg('请选择要结算的商品！')	
				  // 2. 再判断用户是否选择了收货地址
				  if (!this.addstr) return  uni.$showMsg('请选择收货地址！')	
				  // 3. 最后判断用户是否登录了
				   this.payOrder()
			},
			async payOrder() {
			  // 1. 创建订单
			  // 1.1 组织订单的信息对象
			  const orderInfo = {
			    // 开发期间，注释掉真实的订单价格，
			    // order_price: this.checkedGoodsAmount,
			    // 写死订单总价为 1 分钱
			    order_price: 0.01,
			    consignee_addr: this.addstr,
			    goods: this.cart.filter(x => x.goods_state).map(x => ({ goods_id: x.goods_id, goods_number: x.goods_count, goods_price: x.goods_price }))
			  }
			  // 1.2 发起请求创建订单
			  const { data: res } = await uni.$http.post('/api/public/v1/my/orders/create', orderInfo)
			  if (res.meta.status !== 200) return uni.$showMsg('创建订单失败！')
			  // 1.3 得到服务器响应的“订单编号”
			  const orderNumber = res.message.order_number
			
			   // 2. 订单预支付
			   // 2.1 发起请求获取订单的支付信息
			   const { data: res2 } = await uni.$http.post('/api/public/v1/my/orders/req_unifiedorder', { order_number: orderNumber })
			   // 2.2 预付订单生成失败
			   if (res2.meta.status !== 200) return uni.$showError('预付订单生成失败！')
			   // 2.3 得到订单支付相关的必要参数
			   const payInfo = res2.message.pay
			
			   // 3. 发起微信支付
			   // 3.1 调用 uni.requestPayment() 发起微信支付
			   const [err, succ] = await uni.requestPayment(payInfo)
			   // 3.2 未完成支付
			   if (err) return uni.$showMsg('订单未支付！')
			   // 3.3 完成了支付，进一步查询支付的结果
			   const { data: res3 } = await uni.$http.post('/api/public/v1/my/orders/chkOrder', { order_number: orderNumber })
			   // 3.4 检测到订单未支付
			   if (res3.meta.status !== 200) return uni.$showMsg('订单未支付！')
			   // 3.5 检测到订单支付完成
			   uni.showToast({
			     title: '支付完成！',
			     icon: 'success'
			   })
			 }
			 }
	}
</script>
<style lang="scss">
	.goods_list {
		height: 750px;
		box-sizing: border-box;
		padding: 20rpx 30rpx;
		padding-bottom:0;
		.title {
			display: flex;
			border-bottom: 1px solid #f0f0f0;

			text {
				margin-left: 10rpx;
			}
		}
	}
</style>